import React, { memo } from 'react'
import {HNCategoriesWrap} from './style'
import classnames from 'classnames'
import {useDispatch, useSelector, shallowEqual} from 'react-redux'
import {changeCurrentCatagory,changeIsShowCatagory,getCatagorySongsAction} from '../../store/actionCreators'

export default memo(function HNCategories() {

  const {catagory,currentCatagory} = useSelector(state => ({
    catagory : state.getIn(["songs","catagory"]),
    currentCatagory : state.getIn(["songs", "currentCatagory"])
  }),shallowEqual)
  const dispatch = useDispatch();
  const clickCatagoryItem = cat => {
    dispatch(changeCurrentCatagory(cat));
    dispatch(changeIsShowCatagory(false));
    dispatch(getCatagorySongsAction(0));
  }
  return (
   <HNCategoriesWrap>
     <div className="arrow sprite_icon"></div>
      <div className="all">
        <span className="link" onClick={e=>clickCatagoryItem("全部")}>全部风格</span>
      </div>
      <div className="category">
        {
          catagory.map((item, index) => {
            return (
              <dl key={item.name} className={"item" + index}>
                <dt>
                  <i className="icon sprite_icon2"></i>
                  <span>{item.name}</span>
                </dt>
                <dd>
                  {
                    item.subs.map(sItem => {
                      return (
                        <div className="item" key={sItem.name}>
                          <span className={classnames("link",{"active":sItem.name === currentCatagory})} 
                                onClick={e=>{clickCatagoryItem(sItem.name)}}
                                >
                                  {sItem.name}
                                </span>
                          <span className="divider">|</span>
                        </div>
                      )
                    })
                  }
                </dd>
              </dl>
            )
          })
        }
      </div>
    </HNCategoriesWrap>
  )
})
